<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<form action="clock.html" method="post" onsubmit="return checkForm()">
			<div>
				<input type="text" name="username1" class="auth"  value="" />	
				<div class="msg"></div>
			</div>
			<div>
				<input type="text" name="password1" class="auth"  value="" />	
				<div class="msg"></div>
			</div>
			<input type="submit" class="submit" disabled="disabled" value="提交"/>
		</form>
		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('.auth').on('input',function(e){
				var val = $(this).val()
				var name = $(this).attr('name')
				switch (name){
					case 'username1':
						if(!val.length) {
							$(this).next().show().html('不能为空')
							$(this).data('invalid',true)
						}else{
							$(this).next().hide()
							$(this).data('invalid',false)
							
						}
						break;
					case 'password1':
						if(!val.length) {
							$(this).next().show().html('不能为空')
							$(this).data('invalid',true)
						}else{
							$(this).next().hide()
							$(this).data('invalid',false)
							
						}
						break;	
					default:
						break;
				}
				checkInvalid()
			})
			function checkInvalid(){
				var invalid = false;
				$('.auth').each(function(index,item){
					console.log($(this).data('invalid'))
					if($(this).data('invalid')){
						invalid = true
					}
				})
				if(!invalid){
					$('.submit').removeAttr('disabled')
					return true
				}else{
					$('.submit').attr('disabled','disabled')
					return false
				}
			}
			function checkForm(){
				if(checkInvalid()){
					return true
				}else{
					return false
				}
			}
			
		</script>
	</body>
</html>
